<template>
  <div class="alarmConfiguration zy-content">
    <search :columns="searchData" @getSearch="getSearch(arguments)"></search>
    <div class="list-layout mt16">
      <div class="btns clear">
        <span class="title">{{ $t("common.listInformation") }}</span>
        <Button @click="exportTemplateClick">{{
          $t("common.batchExport")
        }}</Button>
        <!-- <Button @click="getTableColumns(columns)">
          {{ handleContextMenuStatus ? $t("显示操作栏") : $t("隐藏操作栏") }}
        </Button> -->
      </div>
      <div class="tableContent">
        <Table
          class="resizable-table"
          border
          @on-column-width-resize="onColumnWidthResize"
          :columns="columnsList"
          ellipsis
          ref="selection"
          stripe
          :data="dataArr"
          @on-selection-change="onSelectChange"
        >
        </Table>
      </div>
      <div class="pageWrap mt16">
        <pageLeftTitle :total="total" :selected="delIds.length" />
        <Page
          :total="total"
          :page-size="pageSize"
          :page-size-opts="pageSizeOption"
          :current="pageNum"
          @on-change="changePageNum"
          @on-page-size-change="changePageSize"
          show-sizer
          show-total
        />
      </div>
    </div>
  </div>
</template>

<script>
import search from "@/components/curd/searchList.vue";
import fileDownload from "js-file-download";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import moment from "moment";

export default {
  name: "pieceSummary",
  components: { search },
  mixins: [toggleTableOperation],
  data() {
    return {
      loading: false,
      searchParams: {},
      pageNum: 1,
      pageSize: 10,
      total: 0,
      delIds: [],
      searchData: [
        {
          title: "姓名",
          key: "name",
          dicUrl: "/basic/user/searchUser",
          type: "select",
          value:'key',
          params: {
            label: "realname",
            value: "realname",
          },
        },
        {
          title: "月份",
          key: "month",
          type: "month",
          format: "yyyy-MM",
        },
      ],
      columns: [
        {
          title: "姓名",
          key: "name",
          minWidth: 130,
          align: "center",
          resizable: true,
        },
        {
          title: "计件工资",
          key: "salary",
          minWidth: 130,
          align: "center",
          resizable: true,
        },
      ],
      dataArr: [],
      pageSizeOption: [10, 20, 30, 40],
    };
  },
  mounted() {
    this.getTableColumnsWidth(this.columns);
    this.searchList();
  },
  methods: {
    getSearch(arg) {
      this.searchParams = JSON.parse(JSON.stringify(arg[0]));
      this.searchParams.month = this.searchParams.month ? this.searchParams.month +"-01":'';
      this.pageNum = 1;
      this.searchList();
    },
    reset() {
      this.searchParams = {};
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(pageSize) {
      this.pageSize = pageSize;
      this.searchList();
    },

    changePageNum(val) {
      this.pageNum = val;
      this.searchList();
    },
    //查询列表
    searchList() {
      this.columns.splice(2);
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        ...this.searchParams,
      };
      this.axios({
        method: "post",
        url: "/dms/oee-board/piecePerformanceCollectReport",
        data: params,
      }).then((res) => {
        if (res.code == 200) {
          const data = res.data.list || [];
          const index = moment(
            this.searchParams.month || moment()
          ).daysInMonth();
          for (let i = 1; i <= index; i++) {
            this.columns.push({
              title: i < 10 ? "0" + i : i + "",
              key: i,
              minWidth: 120,
              align: "center",
              resizable: true,
            });
          }
          this.dataArr = data.map((item) => {
            return {
              ...item.dayCollectDetailMaps,
              name: item.name,
              salary: item.salary,
            };
          });
          this.total = res.data.total;
        } else {
          this.$Message.warning({
            content: res.msg,
            duration: 6,
            closable: true,
          });
        }
      });
    },
    //勾选列表
    onSelectChange(selection) {
      let myArray = [];
      selection.map((item, index) => {
        myArray.push(item.id);
      });
      this.delIds = myArray;
      if (selection.length > 0) {
        this.allCheck = true;
      } else {
        this.allCheck = false;
      }
    },
    //导出
    exportTemplateClick() {
      let params = {
        delIds: this.delIds,
      };
      for (let key in this.searchParams) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
      const filName = "计件绩效汇总报表导出";
      this.axios({
        url: "/dms/oee-board/piecePerformanceCollectReport/export",
        method: "post",
        responseType: "blob",
        data: params,
      }).then((res) => {
        fileDownload(res, filName + ".xls");
      });
    },
  },
};
</script>

<style scoped lang="scss">
.ivu-input-number {
  width: -webkit-fill-available;
}

.row_click {
  cursor: pointer;
  color: rgb(50, 113, 240) !important;
}
</style>
